﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="~/css/table.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <table width="100%">
            <tr>
                <td>
                    <font color="black">
                        您正在做的业务是：人力资源--人力资源档案管理--人力资源档案删除
                    </font>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    符合条件的人力资源档案总数:
                    {{pageCount}}
                    例
                </td>
            </tr>
            <tr>
                <td align="right">
                    <el-button v-on:click="edit()">查询</el-button>
                    <el-button v-on:click="close()">清除</el-button>
                </td>
            </tr>
        </table>
        <table width="100%" border="1" cellpadding="0" cellspacing="1" class="TABLE_STYLE1">
            <tr>
                <td class="TD_STYLE1">
                    请选择I级机构名称/II级机构名称/III级机构
                </td>
                <td class="TD_STYLE2">
                    <el-cascader v-model="values" :options="options" v-on:change="handleChange" placeholder="请选择I级机构/II级机构名称/III级机构名称" ref="refs" width="100%" />
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">请选择职位分类/职位名称</td>
                <td class="TD_STYLE2">
                    <el-cascader v-model="values1" :options="options1" v-on:change="handleChange1" placeholder="请选择职位分类/职位名称" ref="refs1" width="100%" />
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">请输入关键字</td>
                <td class="TD_STYLE2">
                    <el-input v-model="keywords" class="input" placeholder="请输入关键字"></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">请输入建档时间</td>
                <td class="TD_STYLE2">
                    <div class="demo-date-picker">
                        <div class="block">
                            <el-date-picker v-model="value1"
                                            type="daterange"
                                            range-separator="至"
                                            start-placeholder="Start date"
                                            end-placeholder="End date"
                                            format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD"
                                            :size="size" />
                        </div>
                    </div>
                </td>
            </tr>
        </table>

        <el-table :data="tableData" border style="width: 100%;background-color: #ffffbb;">
            @* <el-table-column prop="humanId" label="档案编号"></el-table-column> *@
            <el-table-column label="档案编号" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center;">
                        <span style="color:blue;" v-on:click="info(scope.row.hufId)">{{ scope.row.humanId }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="humanName" label="姓名"></el-table-column>
            <el-table-column prop="humanSex" label="性别"></el-table-column>
            <el-table-column prop="firstKindName" label="I级机构"></el-table-column>
            <el-table-column prop="secondKindName" label="II级机构"></el-table-column>
            <el-table-column prop="thirdKindName" label="III级机构"></el-table-column>
            <el-table-column prop="humanMajorKindName" label="职位分类"></el-table-column>
            <el-table-column prop="humanMajorName" label="职位名称"></el-table-column>
        </el-table>
        <div id="pageDiv">
            <span class="span1">  总数：{{pageCount}} 例    当前第{{pageIndex}}页 /每页显示 {{pageSize}} 条    共 {{page}} 页  </span>
            <div class="div">
                <button v-on:click="HomePage()">首页</button>
                <button v-on:click="PreviousPage()">上一页</button>
                <button v-on:click="NextPage()">下一页</button>
                <button v-on:click="LastPage()">尾页</button>
                跳到第
                <input type="text" style="width: 30px;height: 20px;" v-model="pages">
                <a>页</a>
                <button v-on:click="GoTo()">
                    <img src="~/images/go.bmp" />
                </button>
            </div>
        </div>
    </div>

</body>
</html>
<style>
    .el-cascader {
        width: 50%;
        /* margin-bottom: -18px; */
    }

    .input {
        width: 50%;
    }
    /*     body {
                        background-color: #ffffcc;
                    } */

    #pageDiv {
        padding: 10px;
    }

    .div {
        width: 410px;
        height: 25px;
        /* background-color: black; */
        margin-left: 400px;
        margin-top: -26px;
        line-height: 25px;
    }

    .span1 {
        font-size: 15px;
    }

    .div button {
        margin: 0 5px;
        background-color: #00000000;
        border: 0px;
    }

    .div a {
        margin: 0 5px;
    }

    a {
        text-decoration: none;
        color: white;
    }

    tbody, td, tfoot, th, thead, tr {
        border-color: inherit;
        background-color: #ffffbb;
        border-style: solid;
        border-width: 0;
    }
</style>
<script>
    const { createApp, ref, reactive, computed} = Vue
    var app = createApp({
        setup() {
            const tableData = ref([])
            const pageCount = ref()//总记录数
            const pageIndex = ref(1)//当前页数
            const pageSize = ref(5)//每页显示数
            const page = computed(() => {
                return Math.ceil(pageCount.value / pageSize.value)
            });//总页数
            const pages = ref()//跳转到的页数
            const options = ref([])//级联显示下拉框数据
            const options1 = ref([])//级联显示下拉框数据
            const majorKindId = ref(null)//职位分类编号
            const majorId = ref(null)//职位编号
            const keywords = ref(null)//关键字
            const refs = ref()
            const refs1 = ref()
            const values = ref(null)//1级机构2级机构3级机构
            const values1 = ref(null)//职位分类/职位名称
            let firstKindId = ref(null)//1级机构编号
            let secondKindId = ref(null)//2级机构编号
            let thirdKindId = ref(null)//3级机构编号
            const value1 = ref([])//用于接收时间的集合
            const startDate = ref(null);//开始时间
            const endDate = ref(null);//结束时间

            //首页
            function HomePage() {
                pageIndex.value = 1;
                edit();
            }

            //上一页
            function PreviousPage() {
            if (pageIndex.value != 1) {
                    pageIndex.value -= 1;
                    edit();
                }
            }

            //下一页
            function NextPage() {
            if (pageIndex.value != page.value) {
                    pageIndex.value += 1;
                    edit();
                }
            }

            //尾页
            function LastPage() {
                pageIndex.value = page.value;
                edit();
            }

            //转到页数
            function GoTo() {
                if (!isNaN(pages.value)) {
                    if (pages.value > page.value || pages.value < 1) {
                        alert("输入的页数有误！")
                        pages.value = ""
                    } else {
                        pageIndex.value = Number(pages.value)
                        pages.value = ""
                        edit();
                    }
                } else {
                    alert('你输入的不是数字！')
                }
            }

            function cascaders(){
                axios.get("/HF/Cascaders2").then(res =>{
                    options.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
            }
            cascaders()
            function cascaders1(){
                axios.get("/HF/Cascaders").then(res =>{
                    options1.value = res.data
                }).catch(error =>{
                    console.info(error)
                })
            }
            cascaders1()

            function handleChange() {
                const a = [];
                const b = [];
                const arr = refs.value.getCheckedNodes()[0].pathNodes;
                arr.forEach((i) => {
                    a.push(i.label);
                    b.push(i.value);
                });
                firstKindId.value = b[0]
                secondKindId.value = b[1]
                thirdKindId.value = b[2]
            };
            function handleChange1() {
                const a = [];
                const b = [];
                const arr = refs1.value.getCheckedNodes()[0].pathNodes;
                arr.forEach((i) => {
                    a.push(i.label);
                    b.push(i.value);
                });
                majorKindId.value = b[0]
                majorId.value = b[1]
            };

            //查询按钮
            function edit(){
                for (var i = 1; i < value1.value.length; i++){
                    startDate.value = value1.value[0]
                    endDate.value = value1.value[1]
                }
                axios.get("/HF/HFWhereList3",{
                    params:{
                        pageSize:pageSize.value,
                        indexPage:pageIndex.value,
                        fid:firstKindId.value,
                        sid:secondKindId.value,
                        tid:thirdKindId.value,
                        mkid:majorKindId.value,
                        mid:majorId.value,
                        keywords:keywords.value,
                        startDate:startDate.value,
                        endDate:endDate.value
                    }
                }).then(res =>{
                    tableData.value = res.data.list
                    pageCount.value = res.data.rows
                    console.info(res.data)
                }).catch(error =>{
                    console.info(error)
                })
            }

            function close(){
                firstKindId.value = ""
                pageCount.value = ""
                secondKindId.value = ""
                thirdKindId.value = ""
                majorKindId.value = ""
                majorId.value = ""
                keywords.value = ""
                startDate.value = ""
                endDate.value = ""
                values.value = []
                values1.value = []
                value1.value = []
                tableData.value = []
            }

            function info(row){
                window.location.href = "/HF/HFDeleteInfo?id="+row
            }

            return {
                tableData,pageCount,pageIndex,pageSize,page,pages,HomePage,LastPage,NextPage,PreviousPage,GoTo,
                options,majorKindId,majorId,keywords,edit,values,handleChange,info,
                thirdKindId,secondKindId,firstKindId,refs,value1,refs1,values1,handleChange1,options1,close,startDate,endDate
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>                 